import { Button, Space } from "antd"
import { useMemo, useState } from "react"

const MemoDemo = () => {
  const [count, setCount] = useState(0)
  const dbCount = useMemo(() => count * 2, [count])
  return (
    <>
      <h3>--状态缓存</h3>
      <Space>
        <Button onClick={() => setCount(count + 1)}>
          count: {count}
        </Button>
        <span>useMemo: {dbCount}</span>
      </Space>
      <ul>
        <li>useMemo 目的是为了优化每次组件重新创建时出现的重复计算的问题</li>
        <li>useMemo 能缓存组件状态，状态真的改变时，才会执行回调函数</li>
      </ul>
    </>
  )
}

export default MemoDemo
